<template>
  <div>
   <!-- 搜索表单 行内表单 -->
    <el-form :inline="true" :model="form" @submit.native.prevent
    class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="form.name" @keyup.native.enter="onSubmit"
        placeholder="模糊查询演员姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">演员列表</el-divider>
    <person v-for="(item,i) in actors" :key="i" :name="item.actor_name"
    :avatar="item.actor_avatar" @delete="deleteItem(i,$event)"></person>
  </div>
</template>

<script>
import Person from '@/components/Person.vue'

export default {
    components:{Person},
    data() {
        return {
            // 表单数据 -- 回车会自动提交表单 ; 在表单中使用 @submit.native.prevent
            form:{
                name:'',
            },
            // 演员列表
            actors:[],
        }
    },
    // 组件挂载完毕后自动调用生命周期方法
    mounted(){
        console.log('mounted');
      //  http 文件夹中进行了封装  -->封装成全局变量,再进行调用
        this.$http.actorApi.queryAll().then(res=>{
          this.actors=res.data.data
        })
    },
    methods: {
      // $event 是传递的参数--> params ?
       deleteItem(i,params){
        let id=this.actors[i].id
          console.log('删除演员'+id);          
          this.$http.actorApi.delete({id}).then(res=>{
            if(res.data.code==200){
              this.$message({message:'删除完成',type:'success'})
              // 删除当前列表中的 I 位置的元素
              this.actors.splice(i,1)
              //  ? 删除后为什么会自动重新加载列表
            }
          })
        },
      // 点击按钮后 发请求进行查询
        onSubmit() {
          // 传参传参!!!
            this.$http.actorApi.queryByNameLike(this.form).then(res=>{
              console.log(res);
            this.actors=res.data.data
            })
        },      
    },
};
</script>

<style lang="scss" scoped>
</style>